<template>
  <div style="border: 3px solid red; margin: 10px;">
    <!--1 给子组件以添加属性的方式传值-->
    我是App组件
    <!--E2 父组件监听事件 对应函数-->
    <TheSon :title="myTitle" @changeTitle="changeFn"></TheSon>
  </div>
</template>

<script>
import TheSon from './components/Son.vue';

/*
什么是组件通信
组件通信，就是指 组件与组件 之间的数据传递
  1 组件的数据是独立的，无法直接访问其他组件的数据
  2 想用其他组件的数据 -> 组件通信

不同的组件关系 和 组件通信方案分类
  组件关系分类
    1. 父子关系
       props和$emit
          父子通信流程:
            *.父组件通过 props 将数据传递给子组件
            *子组件利用 $emit 通知父组件修改更新
    2. 非父子关系
       1) provide 和 inject 
       2) eventbus
    3 ******
       通用解决方案 vuex  
*/


export default {
  name: 'App',
  data() {
    return {
      myTitle: '测试数据'
    }
  },
  methods: {
    //E3 提供处理函数 形参中是参数 
    changeFn(newTitle) {
      this.myTitle = newTitle;
    }
  },
  components: {
    TheSon,
  }

}
</script>

<style></style>